<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title}"></title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="css/fontawesome-all.min.css">
    <link rel="stylesheet" href="css/app-style.css">

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.13.0/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</head>
<body>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="collapse navbar-collapse" id="navbarToggler">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li class="nav-item">
                <a class="nav-link" href="/">文件管理</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="/directory">目录管理</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/admin">账号管理</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="/swagger-ui.html" target="_blank">REST API 调用接口</a>
            </li>
            <a class="nav-link" href="/logout">退出系统</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0" th:action="@{/search}">
            <input class="form-control mr-sm-2" type="search" placeholder="文件名" name="filename" id="filename">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
    </div>
</nav>


<div class="table-responsive">

    <div class="alert alert-success" th:if="${message}">
        <h2 th:text="${message}"/>
    </div>

    <table class="table table-striped table-hover">
        <thead class="thead-light">
        <tr>
            <th>文件夹</th>
            <th>文件数</th>
            <th>公开访问</th>
            <th>权限</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>

        <tr th:each="directory : ${directories}">
            <form th:action="@{/directory/deleteDirectory}" th:method="DELETE">
                <td>
                    <i th:if="${directory.childrenCount>0}" class="fas fa-folder"></i>
                    <i th:if="${directory.childrenCount==0}" class="far fa-folder"></i>
                    <a th:href="@{'/path@'+${directory.id}}" th:text="${directory.path}"/>
                </td>
                <td th:text="${directory.childrenCount}"></td>
                <td>
                    <span th:if="${directory.publicVisible}"><i class="fas fa-check"></i></span>
                </td>
                <td>
                    <ul class="custom-list">
                        <li th:each="owner:${directory.owners}">
                            <span th:text="${owner.name}"></span>[
                            <span th:text="${ownerTypeMap[owner.type]}"></span>:
                            <span th:text="${privilegeMap[owner.privilege]}"></span>]
                        </li>
                    </ul>
                </td>
                <td>
                    <div class="input-group">
                        <a th:href="@{'/zip-resource/'+${directory.id}}" class="btn btn-dark">
                            <i class="fas fa-cloud-download-alt"></i>
                        </a>
                        <input type="hidden" id="directoryId" name="directoryId"
                               th:value="${directory.id}"/>
                        <input type="hidden" th:name="${_csrf.parameterName}"
                               th:value="${_csrf.token}"/>
                        <input type="submit" value="&#xf2ed" class="btn btn-danger far fa-trash-alt"/>
                    </div>
                </td>
            </form>
        </tr>
        </tbody>
    </table>
</div>

<footer>
    <p>2018 &copy; Quick Doc 快捷文档共享</p>
</footer>

</body>
</html>